<template>
	<div v-if="isAuth(['ROOT', 'WORKFLOW:CHARGE'])">
		<el-form :inline="true" :model="searchForm" :rules="dataRule" ref="searchForm">
			<el-form-item prop="tag">
				<el-input v-model="searchForm.code" placeholder="规则编码" size="medium" clearable="clearable" style="width: 120px;"/>
			</el-form-item>
			<el-form-item prop="name">
				<el-input v-model="searchForm.name" placeholder="规则名称" size="medium" clearable="clearable" style="width: 150px;"/>
			</el-form-item>
			<el-form-item>
				<el-select
					v-model="searchForm.status"
					class="input"
					placeholder="状态"
					size="medium"
					clearable="clearable"
				>
					<el-option label="有效" value="1" />
					<el-option label="关闭" value="2" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button size="medium" type="primary" @click="searchHandle()">查询</el-button>
				<el-button size="medium" type="primary" @click="addHandle()">添加</el-button>
				<el-tag
				  :type="danger"
				  effect="light"
				  style="margin-left: 20px;display: inline-block;"
				>
					<span style="color:red;font-weight: bolder;">当前生效规则：</span>编号:{{current.code}}<span style="margin-left: 20px;">名称：{{current.name}}</span>
				</el-tag>
			</el-form-item>
		</el-form>
		<el-table
			:data="dataList"
			border
			v-loading="dataListLoading"
			cell-style="padding: 4px 0"
			style="width: 100%;"
			size="medium"
			@selection-change="selectionChangeHandle"
			:row-key="getRowKeys"
		>
			<el-table-column prop="code" header-align="center" align="center" min-width="100" label="规则编号" />
			<el-table-column prop="name" header-align="center" align="center" min-width="200" label="规则名称" />
			<el-table-column prop="status" header-align="center" align="center" min-width="100" label="状态" />
			<el-table-column prop="createTime" header-align="center" align="center" min-width="120" label="创建时间" />
			<el-table-column header-align="center" align="center" width="250" label="操作">
				<template #default="scope">
					<el-button
						type="text"
						size="medium"
						@click="updateHandle(scope.row.id, 1)"
						:disabled="scope.row.status == '启用'"
					>
						启用
					</el-button>
					<el-button
						type="text"
						size="medium"
						@click="updateHandle(scope.row.id, 2)"
						:disabled="scope.row.status == '关闭'"
					>
						关闭
					</el-button>
					<el-button
						type="text"
						size="medium"
						@click="editRuleHandle(scope.row)"
					>
						编辑规则
					</el-button>
					<el-button
						type="text"
						size="medium"
						:disabled="!isAuth(['ROOT', 'WORKFLOW:DELETE']) || scope.row.takeCount > 0"
						@click="deleteHandle(scope.row.id)"
					>
						删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
			:current-page="pageIndex"
			:page-sizes="[10, 20, 50]"
			:page-size="pageSize"
			:total="totalCount"
			layout="total, sizes, prev, pager, next, jumper"
		></el-pagination>
		<el-dialog v-model="updateVisible" title="提示信息" width="300px" center>
			<div class="notice">你确定{{ operate }}这个规则？</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button size="medium" @click="updateVisible = false">取消</el-button>
					<el-button type="primary" size="medium" @click="confirmHandle()">确定</el-button>
				</span>
			</template>
		</el-dialog>
		<el-dialog :title="editDialogTitle" v-model="ruleCodeDialogVisible" @close="onCancelEdit">
			<el-form ref="form" :model="form" label-width="80px">
			  <el-form-item label="名称">
			    <el-input v-model="dataForm.name"></el-input>
			  </el-form-item>
			  <el-form-item label="编码">
			    <el-input v-model="dataForm.code"></el-input>
			  </el-form-item>
			  <el-form-item label="状态">
			    <el-select v-model="dataForm.status" placeholder="请选择状态">
			      <el-option label="有效" value=1></el-option>
			      <el-option label="关闭" value=2></el-option>
			    </el-select>
			  </el-form-item>
			  <el-form-item label="创建时间" v-if="formType=='update'">
			    <el-date-picker type="datetime" v-model="dataForm.createTime" disabled="true"></el-date-picker>
			  </el-form-item>
			  <el-form-item label="规则代码">
			    <el-input
			    	:autosize="{ minRows: 20, maxRows: 500}"
			    	type="textarea"
			    	placeholder="请输入QLExpress Java代码"
			    	v-model="dataForm.rule">
			    </el-input>
			  </el-form-item>
			  <el-form-item style="text-align: right;">
			    <el-button type="primary" @click="onSubmitEdit">保存</el-button>
			    <el-button @click="onCancelEdit">取消</el-button>
			  </el-form-item>
			</el-form>
			
		</el-dialog>
	</div>
</template>
<script>
import $ from 'jquery';
export default {

	data() {
		return {
			ruleName: "profitsharing",
			formType: "insert",
			ruleCodeDialogVisible: false,
			dataForm: {
				name: null,
				code: null,
				type: null,
				rule: "",
				status: null,
				createTime: null
			},
			searchForm: {
				name: null,
				code: null,
				type: null,
				status: null
			},
			current: {
				id: null,
				name: null,
				code: null
			},
			editDialogTitle: null,
			operate: "启用",
			dataList: [],
			pageIndex: 1,
			pageSize: 10,
			totalCount: 0,
			dataListLoading: false,
			dataRule: {},
			dataListSelections: [],
			content: {},
			id: null,
			status: null,
			updateVisible: false,
			operate: null,
			getRowKeys(row) {
				return row.id;
			}
		};
	},
	methods: {
		onCancelEdit(){
			this.ruleCodeDialogVisible = false;
			this.dataForm = {
				id: null,
				name: null,
				code: null,
				type: null,
				rule: null,
				status: null,
				createTime: null,
				table: this.ruleName
			}
		},
		onSubmitEdit(){
			let that = this;
			let url;
			if(this.formType == "update") {
				url = "rule/updateRule"
			} else {
				url = "rule/insertRule"
			}
			if(typeof(this.dataForm.status)!= "number") {
				this.dataForm.status = this.dataForm.status=="关闭"?2:1;
			}
			this.dataForm.createTime = null;
			this.dataForm.table = this.ruleName;
			that.$http(url, 'POST', this.dataForm, true, function(resp) {
				if (resp.rows > 0) {
					that.onCancelEdit();
					that.$message({
						message: '保存成功',
						type: 'success',
						duration: 1200,
						onClose: () => {
							that.loadDataList();
						}
					});
				} else {
					that.$message({
						message: '保存失败',
						type: 'warning',
						duration: 1200
					});
				}
			});
		},
		editRuleHandle(row){
			this.formType = "update";
			this.ruleCodeDialogVisible = true;
			this.editDialogTitle = row.name;
			this.dataForm.id = row.id;
			this.dataForm.name = row.name;
			this.dataForm.code = row.code;
			this.dataForm.type = row.type;
			this.dataForm.rule = row.rule;
			this.dataForm.status = row.status;
			this.dataForm.createTime = row.createTime;
			this.dataForm.table = this.ruleName;
		},
		deleteHandle: function(id) {
		    let that = this;
			let data = {
				id: id,
				table: that.ruleName
			}
		    that.$confirm(`确定要删除选中的记录？`, '提示', {
		        confirmButtonText: '确定',
		        cancelButtonText: '取消',
		        type: 'warning'
		    }).then(() => {
		        that.$http('rule/deleteRule', 'POST', data, true, function(resp) {
		            if (resp.rows > 0) {
						that.loadDataList();
		                that.$message({
		                    message: '操作成功',
		                    type: 'success',
		                    duration: 1200
		                });
		            } else {
		                that.$message({
		                    message: '未能删除记录',
		                    type: 'warning',
		                    duration: 1200
		                });
		            }
		        });
		    });
		},
		confirmHandle: function() {
		    let that = this;
		    let data = {
		        id: that.id,
		        status: that.dataForm.status,
				table: that.ruleName
		    };
		    that.$http('rule/updateRule', 'POST', data, true, function(resp) {
		        that.updateVisible = false;
		        if (resp.rows > 0) {
		            that.$message({
		                message: '更新成功',
		                type: 'success',
		                duration: 1200,
		                onClose: () => {
		                    that.loadDataList(); //刷新页面
		                }
		            });
		        } else {
		            that.$message({
		                message: '更新失败',
		                type: 'warning',
		                duration: 1200
		            });
		        }
		    });
			that.dataForm.status = null;
		},
		updateHandle: function(id, status) {
		    this.id = id;
			this.operate = (status == 1) ? "启用" : "关闭";
			this.dataForm.status = status;
		    this.updateVisible = true;
		},
		selectable: function(row, index) {
		    if (row.takeCount > 0) {
		        return false;
		    }
		    return true;
		},
		selectionChangeHandle: function(val) {
		    this.dataListSelections = val;
		},
		addHandle: function() {
		    this.formType = "insert";
		    this.ruleCodeDialogVisible = true;
		},
		searchHandle: function() {
			this.dataForm = this.searchForm;
		    this.loadDataList();
		},
		sizeChangeHandle: function(val) {
		    this.pageSize = val;
		    this.pageIndex = 1;
		    this.loadDataList();
		},
		currentChangeHandle: function(val) {
		    this.pageIndex = val;
		    this.loadDataList();
		},
		loadDataList: function() {
		    let that = this;
		    that.dataListLoading = true;
			console.log(that.dataForm.status);
		    let data = {
				table: that.ruleName,
		        pageNum: that.pageIndex,
		        pageSize: that.pageSize,
		        name: that.dataForm.name == '' ? null : that.dataForm.name,
		        code: that.dataForm.code == '' ? null : that.dataForm.code,
		        status: (that.dataForm.status == ''||that.dataForm.status==null) ? null : Number(that.dataForm.status),
		    };
		
		    that.$http('rule/searchRule', 'POST', data, true, function(resp) {
		        let result = resp.result;
		        let list = result.list;
		        let status = {
		            '1': '启用',
		            '2': '关闭',
		        };
		
		        for (let one of list) {
		            one.status = status[one.status + ''];
		        }
		        that.dataList = list;
				that.totalCount = Number(result.total);
		        that.dataListLoading = false;
				
				let currentRule = resp.current;
				that.current.name = currentRule.name;
				that.current.code = currentRule.code;
				that.current.id = currentRule.id;
				
		    });
		},
	},
	created: function() {
		this.loadDataList();
	}
};
</script>